<!DOCTYPE html>
<!--
  HTML bootstrap.
  Author: ccalo@google.com (Chris Calo)
  -->
<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi: Project Loon installation guide</title>
    <meta name="description" content="Pendar Yousefi's work on Project Compass" />
    <meta name="author" content="pendar@google.com (Pendar Yousefi)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
    <script src="/js/WallopSlider.js"></script>
  </head>
  <body class="loon">
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
        
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="project-details" class="loon">
        <header>
          <h6>Google [x]: Project Loon</h6>
          <h2>What if Loon's installation process was 100% DIY?</h2>
          <br/>

          <div class="credits cf">
            <ul class="team">
              <li><strong>Design:</strong> Pendar Yousefi</li>
              <li><strong>PM:</strong> Mac Smith</li>
              <li><strong>Eng:</strong> Brian Wasson</li>
              <li><strong>UER:</strong> Christina Hatcher</li>
            </ul>
            <div class="meta">
              <span class="size l"><strong>  Size:</strong> L <em class="bars"><i></i><i></i><i></i><i></i></em></span>
              <span class="impact l"><strong> Impact:</strong> Large <em class="bars"><i></i><i></i><i></i><i></i></em></span>
            </div>
          </div>
          <div class="links">
            <a href="https://drive.google.com/open?id=0B399W4OW_2GweGZiMWtHYTkzMzA&authuser=0"><img src="/img/icon_doc.svg"> Final Guide</a>
            
            <a href="https://docs.google.com/a/google.com/presentation/d/1_hPrAqPUz8DpsYtqicpf7vEViMackZ5sNVp2ZgxXVME/edit"><img src="/img/icon_presentation.svg"> Usability<br/>  study</a>
          </div>
        </header>
        <article class="value" style="margin-top:-100px">
          <hgroup>
          <img src="/img/loon/how.png">
            <h6>Motivation</h6>
            <p class="lead"> To get a Loon signal, users must install a receiver on their home, much like installing a satellite. Making the installation process 100% DIY means huge savings for Google in hiring costs of professional installers.</p>
          </hgroup>
        </article>
        <article class="value">
          <h6>my role</h6>
          <h2> Designing with no words</h2>
          <p class="colz-2">I worked with the loon team at Google [x] for over nine months on a 20% project to lead the redesign of a DIY installation guide for loon. By the end I had created a fully-illustrated guide that <strong>reduced user errors by 77% </strong> and was completely word-free, easily allowing it to be used internationally without the need for translation.</p>        
        </article>
        <article class="process right cf">
          <hgroup>
            <h6>Process</h6>
            <h3> 11 iterations </h3>
            <p> I Attended 3 sets of field tests in rural areas, and produced 11 iterations of the guide over 9 months, applying user feedback to improve task completion from only 12.5% in the first guide, to 80% in the final version. I crafted technical illustrations that all matched the hand-drawn aesthetics of the Loon branding.</p>

          </hgroup>
          <img src="/img/loon/guide.png">
        </article>
        
        <article class="process middle">
          <hgroup>
            <h6>Usability</h6>
            <h3> Successful results </h3>
            <p> The final usbaility test acheived hugely successful results, with major improvements recorded in all  tested areas from the first version. <br/>80% of participants successfully completed installation. 4 out of 5 successfully selected an effective location (compared to 1 out of 7 in the first test).</p>

          </hgroup>
          <div class="quotes cf">
            
            <div style="background:url(/img/loon/loon-field.png) 50% 50% no-repeat; background-size:cover;">
             <p>
              </p>
            </div>
            <div><p>
              5 of 5 reported clearly understanding the installation guide. </p>
            </div>
            <div style="background:url(/img/loon/loon-field2.png) 50% 50% no-repeat; background-size:cover;"><p>
              </p>
            </div>
          </div>
        </article>
        <article class="process">
          
        </article>

      </section>
    </section>
   <div class="wrapper">
   </div>
  </body>
  <script src="/js/jquery.columnizer.js"></script>
  <script>
  $(document).ready(function(){

   
    var slider = new WallopSlider('.wallop-slider');

    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
